<template>
  <div>
    
    <div id="app">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>书名</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <book-choice 
            v-for="(book, index) in books" 
            :key="book.title"
            :book="book"
            :index="index"
            @remove="remove"
            @decrement="decrement"
            @increment="increment"
            @select="selectBook"
          ></book-choice>
          <!-- 添加表单行 -->
          <tr v-if="showForm" class="add-row">
            <td>{{ books.length + 1 }}</td>
            <td>
              <input 
                v-model="newBook.title" 
                placeholder="输入书名"
              >
            </td>
            <td>
              <input 
                v-model.number="newBook.price"
                type="number"
                min="0"
                placeholder="输入价格"
              >
            </td>
            <td>
              <button 
                :disabled="newBook.quantity <= 0" 
                @click="newBook.quantity--"
              >-</button>
              {{ newBook.quantity }}
              <button @click="newBook.quantity++">+</button>
            </td>
            
          </tr>
        </tbody>
      </table>
    </div>
    <button @click="showForm = true" v-if="!showForm">添加书籍</button>
    <div v-if="showForm">
              <button @click="addConfirm">确定</button>
              <button @click="addCancel">取消</button>
            </div>
    <p>总价：￥{{ totalPrice }}</p >
    <p>当前选中书籍：{{ selectedBook ? selectedBook.title : '' }}</p>
  </div>
</template>

<script>
import BookChoice from './components/BookChoice.vue'

export default {
  components: { BookChoice },
  data() {
    return {
      books: [
        {  title: '《JavaScript高级程序设计》', price: 126, quantity: 1 },
        {  title: '《你不知道的 JS（上卷）》', price: 78, quantity: 1 },
        {  title: '《你不知道的 JS（中卷）》', price: 76, quantity: 1 },
        { title: '《你不知道的 JS（下卷）》', price: 64, quantity: 1 },
      ],
      selectedBook: null,
      newBook: {
        title: '',
        price: 0,
        quantity: 1
      },
      showForm: false
    }
  },
  computed: {
    totalPrice() {
      let price = 0
      for (const book of this.books){
        price +=book.price*book.quantity
      }
      return price
    }
  },
  methods: {
    addConfirm() {
      if (!this.newBook.title || this.newBook.price <= 0) {
        alert('请填写完整且有效的书籍信息');
        return;
      }
      this.books.push({
        ...this.newBook
      });
      this.addCancel();
    },
    addCancel() {
      this.newBook = { title: '', price: 0, quantity: 1 };
      this.showForm = false;
    },
    remove(index) {
      this.books.splice(index, 1);
    },
    decrement(index) {
      if (this.books[index].quantity > 0) {
        this.books[index].quantity--;
      }
    },
    increment(index) {
      this.books[index].quantity++;
    },
    selectBook(book) {
      this.selectedBook = book;
    }
  }
}
</script>

<style scoped>
table{
 border: 2px;
}
.add-row input {
  padding: 5px;
  margin: 0 5px;
}
button {
  margin: 0 3px;
  padding: 5px 10px;
}
</style>